<template>
	<view>
		
		
		<view class="main">
			<view class="mainsp">
				<view class="left">
					提现方式
				</view>				
			</view>
			
			<view class="main-box" @click="change(1)" v-if="data.is_alipay == 1">
				<image src="https://admin.cqycgyl.com/uploads/20250909/380b8093f4e6edc7ee2b5f0d9e21b9a9.png" mode="" class="mainimg"></image>
				<view class="info">
					支付宝账户
				</view>
				<image src="https://admin.cqycgyl.com/uploads/20250913/e591aa90abafa1f0a9af851038f33d60.png" mode="" class="rightimg" v-if="type == 1"></image>
				<image src="https://admin.cqycgyl.com/uploads/20250913/c0367f322399a9e10de4415f69259d0c.png" mode="" class="rightimg" v-else></image>
			</view>
			<view class="main-box" @click="change(0)" v-if="data.is_weixin == 1">
				<image src="https://admin.cqycgyl.com/uploads/20250909/e99e9d7bff5bb96321dc3b12157e68df.png" mode="" class="mainimg"></image>
				<view class="info">
					微信账户
				</view>
				<image src="https://admin.cqycgyl.com/uploads/20250913/e591aa90abafa1f0a9af851038f33d60.png" mode="" class="rightimg" v-if="type == 0"></image>
				<image src="https://admin.cqycgyl.com/uploads/20250913/c0367f322399a9e10de4415f69259d0c.png" mode="" class="rightimg" v-else></image>
			</view>
			<view class="main-box" @click="change(2)" v-if="bankList.length > 0">
				<image src="https://admin.cqycgyl.com/uploads/20250909/53c7d2dcb9388b6e497adbded6a9afa0.png" mode="" class="mainimg"></image>
				<view class="info">
					银行卡账户
				</view>
				<image src="https://admin.cqycgyl.com/uploads/20250913/e591aa90abafa1f0a9af851038f33d60.png" mode="" class="rightimg" v-if="type == 2"></image>
				<image src="https://admin.cqycgyl.com/uploads/20250913/c0367f322399a9e10de4415f69259d0c.png" mode="" class="rightimg" v-else></image>
			</view>
			<view class="main-box" @click="navigateTo" v-if="bankList.length == 0">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/Group%203912%402x.png" mode="" class="mainimg"></image>
				<view class="info">
					添加银行卡
				</view>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/Group%203907%402x.png" mode="" class="rightimg" v-if="type == 2"></image>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/Ellipse%20508%402x.png" mode="" class="rightimg" v-else></image>
			</view>
		</view>

		
		<view class="withdraw-middle box-card">
			<text style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 32rpx;color: #333333;text-align: left;font-style: normal;text-transform: none;">提现金额</text>
			<view class="withdraw-input-container">
				<u-icon name="rmb" size="40"></u-icon> 
				<u-input 
				class="withdraw-input" 
				maxlength="6"  
				v-model="money"  
				type="digit" 
				:border="false" 
				placeholder="请输入提现金额" 
				style="caret-color: #36BE6A;"
				>					
					
				</u-input>
				<!-- 请输入提现金额 -->
				<text class="all-withdraw" @click="()=>{money=data.shop_money;showConfirm=true}">全部提现</text>
			</view>
			<view class="can_with">
				可提现金额￥{{data.shop_money || 0}}元
			</view>		
		</view>
		<view class="bottom-describ">
			<view style="padding: 0 40rpx;margin: 20rpx 0 0;">
				<u-section :title="'提现说明'" :right="false" line-color="#F16325" :font-size="32"></u-section> 
			</view>
			<view class="withdraw-bottom-row" style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 28rpx;color: #999999;line-height: 42rpx;text-align: left;font-style: normal;text-transform: none;padding: 20rpx 40rpx 0;">
				<text class="withdraw-balance-tips" v-for="(text,index) in tixian_desc" :key="index">{{text}}</text>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @click="GotoPayoutsinfo">
				立即提现
			</view>
		</view>
		<tixian-success v-model="tixianSuccess"
			:title="title"
			:money="money"
			:method="method"
			:fuwuFee="fuwuFee"
			:expectedTime="expectedTime"
			:status="status"
			:time="time"
		 ></tixian-success>
		 <u-popup v-model="showCardDrawer" height="750rpx" mode="bottom" border-radius="30" safe-area-inset-bottom>
			<view class="add-card-popup">
				<view class="add-card-popup-title">
					<view class="add-card-popup-title-text">选择银行卡</view>
					<view class="add-card-popup-title-close" @click="showCardDrawer=false">
						<u-icon name="close" color="#333" size="30"></u-icon>
					</view>
				</view>
				<scroll-view class="add-card-popup-content" v-if="cardList.length > 0" scroll-y>
					<view class="add-card-popup-content-item" :style="{background:item.bgColor}" v-for="(item, idx) in cardList" :key="idx" @click="confirmTixian(item)" >
						<image class="add-card-popup-content-item-icon" :src="item.icon" />
						<view class="add-card-popup-content-info">
							<view class="bank-name">{{item.bank_name}}</view>
							<view class="chuxuka">储蓄卡</view>
						</view>
						<view class="add-card-popup-content-item-right">
							<span class="bank-code">****  {{ getBankCode(item.bank_code) }}</span>
						</view>
						
					</view>
				</scroll-view>
				<view v-else style="text-align: center; color: #999; font-size: 28rpx; margin: 40rpx 0;">
					暂无银行卡，请先添加
				</view>
				<button class="add-card-popup-button" @click="gotoAddCard">
					<image src="https://admin.cqycgyl.com/uploads/20250913/d1fec92a13aa92c7ad045a44ec29a615.png"
					style="width: 40rpx;height: 40rpx;"
					></image>
					添加银行卡</button>			
			</view>
		</u-popup>
	</view>
	
</template>

<script>
import MoneyList from '@/components/money-list/Money-list.vue'
import tixianSuccess from '@/components/tixian-success.vue'
	export default {
  components: { MoneyList,tixianSuccess },
		data() {
			return {
				url: 'https://admin.cqycgyl.com',
				bankTank:[],
				showCardDrawer:false,
				cardList:[],
				money:0,
				type:0,
				data:'',
				bankList:[],
				list:[],
				tixianSuccess:false,
				tixian_desc:[],
				title:'提现申请已提交',
				method:'微信零钱',
				fuwuFee:'',
				expectedTime:'',
				status:0,
				time:'',
				content:'提现成功，待审核！',
				selectedCard:{}


			}
		},
		onLoad() {
			this.$u.api.user.getBankIcon().then(res => {
				if(res.code == 1){
					this.bankTank = res.data;
				}
			}).then(()=>{
				this.$u.api.user.getUserBank().then(res => {
					console.log(res)
					this.cardList = res.data;
					this.cardList.forEach(item => {
						item.icon =this.url+ this.getBankIcon(item.bank_name);
						item.bgColor = this.getBankColor(item.bank_name);
					})
				})
				this.$u.api.describ.tixian().then(res => {
					this.tixian_desc = res.data;
				})
			})
			this.$u.api.describ.tixian().then(res => {
					this.tixian_desc = res.data;
			})
			this.$u.api.shop.Getpaylist().then(res =>{
				if(res.code == 200){
					this.data = res.data
				}
			})

			


			// 获取银行卡列表
			this.$u.api.user.getUserBank().then(res => {
				if(res.code == 200){
					this.bankList = res.data
					console.log(this.bankList)
				}
			})
		},
		onShow() {

			this.$u.api.shop.Getpaylist().then(res =>{
				if(res.code == 200){
					this.data = res.data
				}
			})
		},
		methods:{
			confirmTixian(item){
				this.showCardDrawer = false
				uni.showLoading({
					title:'提现中...',
					mask:true
				})
				this.selectedCard = item
				this.btn();
			},
			gotoAddCard(){
				uni.navigateTo({
					url:'/pages/my/card'
				})
			},
			getBankIcon(bank_name){
				return this.bankTank[bank_name].icon;
			},
			getBankColor(bank_name){
				return this.bankTank[bank_name].bgColor;
			},
			getBankCode(bank_code){
				return bank_code.slice(-4);
			},
			btn(){
				let alipayName = uni.getStorageSync('realName');
				if(this.type == 2 && !this.selectedCard.id){
					
					this.showCardDrawer = true
					return;
				}
				if(this.type ==1){
					// 支付宝提现第一次需要输入真实姓名
					// 优先从本地缓存获取alipay_name
					
					if (!alipayName) {
						uni.showModal({
							title: '首次支付宝提现',
							content: '',
							editable: true,
							placeholderText: '首次支付宝提现需要真实姓名',
							success: (res) => {
								if (res.confirm && res.content && res.content.trim() !== '') {
									let realName = res.content.trim();
									
								    uni.setStorageSync('realName', realName); // 保存到本地	
									return this.btn();
								} else if (res.confirm) {
									uni.showToast({
										title: '请输入真实姓名',
										icon: 'none'
									});
								}
							}
						});
						return;
					}
				}

				let obj ={
					money:Number(this.money),
					is_type:this.type,
					realName: alipayName
				}
				console.log('1')
				this.$u.api.shop.Tixian(obj).then(res =>{
					console.log('11')
					if(res.code == 200){
						console.log('111')
						// this.show1=true
						if(res.data.need_approval){
							this.tixianSuccess = true
							this.expectedTime = res.data.expectedTime
							this.money = res.data.money
							this.fuwuFee = res.data.fuwuFee
							this.status = res.data.status
							this.method = res.data.method
							this.time = res.data.time
							this.title = res.data.title
						}else if(res.data.package_info){
							console.log('2')
							//不需要审核，直接提现
							uni.requestMerchantTransfer({
								appId: res.data.package_info.appId,
								mchId: res.data.package_info.mchId,
								package: res.data.package_info.package,
								success: (ress) => {
									console.log(ress)
									if(ress.errMsg == 'requestMerchantTransfer:ok'){
										this.tixianSuccess = true
										this.expectedTime = res.data.expectedTime
										this.money = res.data.money
										this.fuwuFee = res.data.fuwuFee
										this.status = res.data.status
										this.method = res.data.method
										this.time = res.data.time
										this.title = res.data.title
									}
								},
								fail: (ress) => {
									console.log('22')
									if(ress.result == 'cancel'){	
										uni.showToast({
											title: '用户取消提现',
											icon: 'none'
										})
										setTimeout(()=>{
											this.$u.api.shop.cancelConfirm({id:res.data.id})
										},600)
									}
									
								}
							})
						}else if(res.data.is_type==2){
							//银行卡提现
							this.tixianSuccess = true
							this.expectedTime = res.data.expectedTime
							this.money = res.data.money
							this.fuwuFee = res.data.fuwuFee
							this.status = res.data.status
							this.method = res.data.method
							this.time = res.data.time
							this.title = res.data.title
						}
					}else{
						uni.showModal({
							title: '提现失败',
							content: res.msg
						})
					}
					
				}).catch(req =>{
					this.show2 = true
					this.content1 = req.data.msg
				})
			},
			navigateTo(){
				uni.navigateTo({
					url:'/pages/my/card'
				})
			},
			moneyrecord(){
				uni.navigateTo({
					url:'./Moneyjl'
				})
			},
			change(val){
				this.type = val
			},
			GotoPayoutsinfo(){
				this.btn()
				// uni.navigateTo({
				// 	url:`./payoutsinfo?type=${this.index}`
				// })
			},
			Gotopeizhi(){
				uni.navigateTo({
					url:'./PAYpei'
				})
			},
		}
	}
	
</script>

<style>
	.top{
		width: 690rpx;
		height: 260rpx;
		margin: 30rpx;
		background-color: white;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/Group%203921%402x.png') center/cover;
		position: relative;
	}
	.top-title{
		width:660rpx;
		height: 50rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		margin-left: 30rpx;
	}
	.topimg{
		width: 22rpx;
		height: 22rpx;
	}
	.topsp{
		font-size:24rpx;
		color: rgba(182, 186, 191, 1);
		width:620rpx ;
		margin-left: 10rpx;
	}
	.current{
		width: 100%;
		height: 24rpx;
		font-size: 28rpx;
		color: rgba(136, 142, 149, 1);
		font-family: PingFang SC-Medium;
		font-weight:Medium ;
		margin-top: 28rpx;
		text-align: center;
	}
	.money{
		font-size:76rpx;
		color: rgba(16, 30, 57, 1);
		font-family: DIN-Bold-Regular;
		font-weight: Regular;
	}
	.record{
		position: absolute;
		top: 74rpx;
		right: 30rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	.moreimg{
		width: 18rpx;
		height: 15rpx;
		margin-left: 10rpx;
	}
	.moresp{
		font-size: 24rpx;
		color: #36BE6A;
		font-family: PingFang SC-Medium;
		font-weight:Medium ;
	}
	.mainsp{
		font-size: 32rpx;
		width: 100%;
		height: 32rpx;
		color: black;
		font-family: PingFang SC-Bold;
		font-weight: bold;  
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
	}
	.right{
		width: 120rpx;
		font-size: 24rpx;
		height: 24rpx;
		color: #666666;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		align-items: center;
	}
	.rightimg1{
		width: 10rpx;
		height: 14rpx;
	}
	.main{
		width: 690rpx;
		height: 454rpx;
		background-color: white;
		border-radius: 16rpx;
		margin: 30rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 30rpx;
	}
	.main-box{
		width: 100%;
		height: 44rpx;
		margin-top: 42rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	.mainimg{
		width: 44rpx;
		height: 44rpx;
	}
	.info{
		width: 482rpx;
		font-size: 28rpx;
		color: #222222;
		font-family: PingFang SC-Medium;
		font-weight: Medium;
		margin-left: 16rpx;
	}
	.rightimg{
		width: 36rpx;
		height: 36rpx;
		margin-left: auto;
	}
	.bottom{
		width: 100%;
		height: 136rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
	}
	.btn{

		width: 690rpx;
		margin-left: 30rpx;
		height: 88rpx;
		margin-top: 24rpx;
		border-radius: 44rpx;
		background: #F16325;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	
	.bottom-describ{
		width: 690rpx;
		margin: 24rpx auto;
		background: white;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		height: 324rpx;
		padding: 30rpx;
		padding-left: 0;
	}
	
	.withdraw-bottom-row {padding: 20rpx;}
	
	.withdraw-balance-tips{display: block; font-size: 28rpx;
		color: #666666;}
	.withdraw-middle{display: flex;flex-direction: column;margin-top: 24rpx;}
	.withdraw-input-container{		
		margin-bottom: 20rpx;
		margin-top:20rpx;
		padding-bottom:30rpx;
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;
	}
	.withdraw-input{margin-left: 10rpx;}
	.all-withdraw{
		margin-left: auto;
	}
	

	.add-card-popup{
		padding: 34rpx 30rpx;
		width: 750rpx;
		height: 695rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
	}
	.add-card-popup-title{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 60rpx;
		font-size: 36rpx;
		color: #333333;
		height: 50rpx;
		flex-shrink: 0;
	}

	.add-card-popup-title-close{
		margin-left: auto;
	}

	.add-card-popup-content{
		width: 100%;
		flex:1;
		height: 100%;
	}
	.add-card-popup-content-item{
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
		background: #C65255;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		flex-shrink: 0;

	}
	.add-card-popup-content-item:not(:first-child){
		margin-top: 20rpx;
	}
	.add-card-popup-content-item-icon{
		width: 64rpx;
		height: 64rpx;
	}
	.add-card-popup-content-info{
		margin-left: 20rpx;
	}
	.bank-name{
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.chuxuka{
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.add-card-popup-content-item-right{
		margin-left: auto;
	}
	.bank-code{
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		width: 176rpx;
		height: 44rpx;
		
	}
	.add-card-popup-button{
		width: 100%;
		flex-shrink: 0;
		height: 90rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx dashed #F16325;
		margin-left: auto;
		background: none;
		color: #F16325;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.all-withdraw{
		margin-left: auto;
		background: none;
		color: #F16325;
		border: none;
	}
</style>